<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="./carousel.js"></script>
</head>

<body>
    <div class="carousel">
        <div class="wrapper"></div>
        <div class="page" data-btn="page"></div>
        <div class="button-prev" data-btn="prev"></div>
        <div class="button-next" data-btn="next"></div>
    </div>
    <script>

        var carousel = new Carousel('.carousel',{
            datalist:[{
                    title: "得土了已",
                    bigImg: "./images/1.jpg",
                    smallImg: "./images/1.jpg"
                },
                {
                    title: "他国本夫",
                    bigImg: "./images/2.webp",
                    smallImg: "./images/2.webp"
                },
                {
                    title: "到看",
                    bigImg: "./images/3.webp",
                    smallImg: "./images/3.webp"
                },
                {
                    title: "李方我人得说如或化",
                    bigImg: "./images/4.webp",
                    smallImg: "./images/4.webp"
                },
                {
                    title: "赐韩活然安投位且同",
                    bigImg: "./images/5.webp",
                    smallImg: "./images/5.webp"
                }
            ], //图片数组
            // 获取操作DOM样式
            wrapper:'.wrapper', //用于存放图片数据信息的DOM元素
            page:'.page',//用于存放图片page分页数据信息的DOM元素
            prev:'.button-prev', //后退操作
            next:'.button-next', //前进操作
            autoplay:true, //是否自动播放
            speed:3000, //自动播放速度，需要开始自动播放功能 autoplay = true;
            method:'click', //设定当前事件
            mode:'y', //图片轮播方向 x.y,opacity
        });

        console.log(carousel)
    </script>
</body>

</html>